<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link type="text/css" rel="stylesheet" href="style.css">
		<title>小薇学院任务二</title>
	</head>
	<body>
		<header>
			<img src="img/logo_baidu.jpg" class="logo"/>
			<ul>
				<li ><a href="#">导航链接一</a></li>
				<li ><a href="#">导航链接二</a></li>
				<li ><a href="#">导航链接三</a></li>
				<li ><a href="#">导航链接四</a></li>
			</ul>
		</header>
			<article>
				<h2>文章一级标题</h2>
				<h4>文章二级标题</h4>
				<h6>作者 发布时间</h6>
					<p>很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落</p>换行了<br><p>很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落<a href="http://www.baidu.com" target="_blank">一个链接到百度搜索</a>很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落</p><img src="img/web_01.jpg" /><p>很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落</p>
			</article>
			
			
			<article>
				<h2>另一篇文章</h2>
				<h4>副标题</h4>
				<h6>作者 发布时间</h6>
					<p>很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落很长的段落</p><img src="img/web_01.jpg" />
						<ul style="list-style-type:none">
							<li>列表项目一</li>
							<li>列表项目二</li>
							<li>列表项目三</li>
						</ul>
			</article>
			<article>
				<h2>图片</h2>
					<div class="imgcontainer">
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					<div class="imgbox">
						<span class="myspan">好看的图片</span>
						<img src="img/web_01.jpg" class="image"  />
					</div>
					</div>
			</article>
			<article>
				<h2>第四篇文章</h2>
				<h4>第四篇文章副标题</h4>
				<h6>作者 发布时间</h6>
					<ol>
						<li>排名1</li>
						<li>排名2</li>
						<li>排名3</li>
					</ol>
				<span>下面是一个表格</span>
					<table title="表格">
						<tr style="background:#000; color:#fff;">
							<th width="40%">表头1</th>
							<th width="40%">表头2</th>
							<th width="20%">表头3</th>
						</tr>
						<tr>
							<td>内容</td>
							<td>内容</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>内容</td>
							<td>内容</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>内容</td>
							<td>内容</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr>
							<td>内容</td>
							<td>内容</td>
							<td><a href="#">操作</a></td>
						</tr>
						<tr style="background:#888;">
							<td>总计</td>
							<td colspan="2">1</td>
						</tr>
					</table>
			</article>
			<div id="login">
				<h3>侧栏标题</h3>
				<form title="表单" action="">
					<lable for="emailaddress">请输入邮箱地址：</lable>
						<input type="text" id="emailaddress" placeholder="123@126.com"  /><br />
						<span>邮箱地址要求按照格式输入</span><br />
					<lable for="password">请输入密码：</lable>
						<input type="password" id="password" value="111111"  /><br />
					<lable for="password2">请重复输入密码：</lable>
						<input type="password" id="password2" value="111111" /><br />
						<span>密码为6-16位英文数字</span><br />
					<lable for="single1">性别：</lable>
						<input type="radio" name="single1" />男
						<input type="radio" name="single1" />女<br />
					<lable for="city">城市：</lable>
						<select id="city">
							<option>福建</option>
							<option>广东</option>
							<option selected="selected">北京</option>
						</select><br />
					<lable for="hobby">爱好：</lable>
						<input type="checkbox" name="ho" id="hobby" />音乐
						<input type="checkbox" name="ho" />运动
						<input type="checkbox" name="ho" />科幻<br />
					<lable for="intr">个人描述：</lable>
						<textarea id="intr" placeholder="请输入个人描述"></textarea>
						<input class="submit" type="submit" value="确认提交" />
				</form>
			</div>
		<footer>版权所有&copy;</footer>
	</body>
</html>